<!--  -->
<template>
    <pageTabelLayout>
        <template #pageHeader>
    <a-form :model="form" layout="inline" size="mini">
        <a-form-item label="单位编号">
            <a-input allow-clear class="bacClass" v-model="form.providerCode" :style="{ width: '150px' }" />
        </a-form-item>
        <a-form-item label="单位名称">
            <a-input allow-clear class="bacClass" v-model="form.providerName" :style="{ width: '150px' }" />
        </a-form-item>
    </a-form>
    <!-- '开需求单', -->
    <div class="cssToolbar">
        <Toolbar :items="[
            `查询`, '导出']" @select="cx" @export="exports">
        </Toolbar>
    </div>
</template>
<template #pageTabel>
        <a-spin :loading="form.pageLoading" tip="加载中" dot style="height:100%;width: 100%;z-index:999 ;">
            <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" :suppressDragLeaveHidesColumns="true" rowSelection="multiple"
                @grid-ready="gridReady" @columnResized="onColumnResized" @columnVisible="onColumnVisible"
                @columnMoved="onColumnMoved" style="height: calc(100% - 45px);" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="dataList" :columnDefs="CwColumns"
                :localeText="localeText1"></AgGridVuesCopys>
            <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
                @change="PageSize" @page-size-change="change1" style="justify-content: center" :page-size="size"
                :current="page" />
        </a-spin>
    </template>
</pageTabelLayout>
</template>

<script lang='ts' setup>
import { reactive, ref, onMounted } from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import { post, get } from '@/api/http'
import { Message, Modal } from '@arco-design/web-vue'

import { localeText } from '@/api/aggridZw'
import { pagingList } from '@/api/paging'
import filedownload from 'js-file-download'
// import { addCol, getCol } from '@/utils/columnMoveds'
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
const localeText1: any = ref(localeText)
const pagingList1: any = ref(pagingList)

const defaultColDef: any = {
    sortable: true,
    resizable: true,
    filter: true,
}
const gridOption = ref()
const colState = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
    colState.value = params.columnApi
}

const total = ref(0);
const page = ref(1);
const size = ref(10);
function PageSize(val: any) {
    page.value = val
    doRefresh();
}
function change1(val: any) {
    size.value = val
    doRefresh();
}


const dataList: any = ref([])



const form: any = reactive({
    pageLoading: false,
    "providerCode": '',
    "providerName": '',
})

function doRefresh() {
    form.pageLoading = true
    updateGridState01()
    post({
        url: "/finance/FinanceReport/getPurchaseProvider",
        data: {
            page: page.value,
            size: size.value,
            providerCode: form.providerCode,
            providerName: form.providerName,
        },
    })
        .then(({ data, code, message }: any) => {
            if (code === 200) {
                dataList.value = data.list.map((res: any) => {
                    res['ZKL'] = 100
                    res['YFKM'] = 1122
                    res['YSZKKM'] = 2202
                    res['YSZKKM'] = 2202
                    return res
                })
                gridOption.value.setRowData(dataList.value)
                total.value = data.total
            } else {
                Message.error(message)
            }
        })
        .catch(console.log).finally(() => {
            form.pageLoading = false
        })
}


const cx = () => {
    page.value = 1
    doRefresh()
}


let CwColumns: any = [
    {
        headerName: '单位编号',
        field: 'providerCode',
        width: 150
    },
    {
        headerName: '单位名称',
        field: 'providerName',
        width: 150
    },
    {
        headerName: '单位类型',
        field: 'DWLX',//
        width: 150
    },
    {
        headerName: '单位类别',//
        field: 'DWLB',
        width: 150
    },
    {
        headerName: '付款条件',
        field: 'settlementType',
        width: 150
    },
    {
        headerName: '信用额度',
        field: 'XYRD',//
        width: 150
    },
    {
        headerName: '折扣率',
        field: 'ZKL',//100
        width: 150
    },
    {
        headerName: '员工',
        field: 'YG',//
        width: 150
    },
    {
        headerName: '地区',
        field: 'DQ',//
        width: 150
    },
    {
        headerName: '联系人',
        field: 'contactPerson',
        width: 150
    },
    {
        headerName: '职务',
        field: 'ZW',//
        width: 150
    },
    {
        headerName: '电话',
        field: 'contactPhone',
        width: 150
    },
    {
        headerName: '传真',
        field: 'CZ',//
        width: 150
    },
    {
        headerName: '电子邮件',
        field: 'DZYJ',//
        width: 150
    },
    {
        headerName: '税号',
        field: 'creditCode',
        width: 150
    },
    {
        headerName: '地址',
        field: 'providerAddress',
        width: 150
    },
    {
        headerName: '邮编',
        field: 'YB',//
        width: 150
    },
    {
        headerName: '备注',
        field: 'remark',
        width: 150
    },
    {
        headerName: '应收科目',
        field: 'YSKM',//
        width: 150
    },
    {
        headerName: '应付科目',
        field: 'YFKM',//1122
        width: 150
    },
    {
        headerName: '应收折扣科目',
        field: 'YSZKKM',//2202
        width: 150
    },
    {
        headerName: '应付折扣科目',
        field: 'YFZKKM',//
        width: 150
    },

    {
        headerName: '开户日期',
        field: 'KHRQ',//
        width: 150
    },
    {
        headerName: '关闭日期',
        field: 'GBRQ',//
        width: 150
    },
    {
        headerName: '停用标识',
        field: 'TYBS',//
        width: 150
    },
    {
        headerName: '贴息折扣标识',
        field: 'TXZKBS',//
        width: 150
    },
    {
        headerName: '即时通讯号',
        field: 'JSTXH',//
        width: 150
    },
    {
        headerName: '协同设置',
        field: 'XTSZ',//
        width: 150,
    },
    {
        headerName: '加个等级',
        field: 'JGDJ',//
        width: 150,
    },
    {
        headerName: '手机号码',
        field: 'SJHM',//
        width: 150,
    },
    {
        headerName: '营业执照',
        field: 'YYZZ',//
        width: 150,
    },
    {
        headerName: '药业许可',
        field: 'YYXK',//
        width: 150,
    },
    {
        headerName: '药业合格',
        field: 'YYHG',//
        width: 150,
    },
    {
        headerName: '企业网站',
        field: 'QYWZ',//
        width: 150,
    },
]

const pageData = reactive({
    rHeight: 0
})

onMounted(() => {
    pageData.rHeight = document.getElementsByClassName("main-section")[0]?.clientHeight
    //弹出层的高
    if (pageData.rHeight !== undefined) {
        pageData.rHeight = pageData.rHeight;
    }
    doRefresh()
    // setTimeout(async () => {
    //     const res: any = await getCol(`JingShuanPanBbDw${JSON.parse(sessionStorage.getItem('userLoginData')).username}`, CwColumns.value)
    //     if (res) CwColumns.value = res
    // }, 200)
})

const exports = () => {
    post({
        url: '/finance/FinanceExport/exportPurchaseProvider',
        data: {
            providerCode: form.providerCode,
            providerName: form.providerName,
        },
        responseType: 'blob',
    }).then((res: any) => {
        filedownload(res, '单位.dat')
    })
}

const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('JingShuanPanBbDw-1', gridOption, colState, CwColumns)
const onColumnMoved = () => {
    saveGridState01()
}
const onColumnResized = () => {
    saveGridState01()
}
const onColumnVisible = () => {
    saveGridState01()
}
</script>
<style lang='less' scoped>
.cssToolbar {
    text-align: right;
    margin-bottom: 2px;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

:deep(.arco-table-td-content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>